<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // async 和  await  让异步代码变得像同步一样 顺序执行
        // 代价是  async这个函数本身变成了异步


        // async 它本身只是创建并返回了一个成功的promise实例   这个async单独使用的时候，不会让函数变成异步
        // await 让函数变成了异步 ， await只会等待一个成功的promise结果

        function f1() {
            const p1 = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('get', 'http://43.138.81.225/php/1.php', true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let data = xhr.responseText;
                        resolve(data);
                    }
                }
            })
            return p1
        }

        function f2() {
            const p1 = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('get', 'http://43.138.81.225/php/2.php', true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let data = xhr.responseText;
                        resolve(data);
                    }
                }
            })
            return p1
        }

        function f3() {
            const p1 = new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.open('get', 'http://43.138.81.225/php/3.php', true);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let data = xhr.responseText;
                        resolve(data);
                    }
                }
            })
            return p1
        }


        async function f() {
            const res1 = await f1() ;
            console.log(res1);
            const res2 = await f2() ;
            console.log(res2);
            const res3 = await f3() ;
            console.log(res3);

            console.log(1);
            
        }


        f();



    </script>

</body>

</html>